<template>
	<div>
		<!-- 编辑面板 -->
		<el-dialog :title="shs_title1" :visible.sync="dialogVisible" :width="shs_min_width" :before-close="handleClose">
			<!-- <span>这是一段信息</span> -->
			<template>
				<el-form label-width="80px" :rules="rules" ref="form_up_class" :model="form_up_class" size="normal" @submit.native.prevent>
					<el-form-item :label="shs_item1" prop="className">
						<el-input v-model="form_up_class.className" type="text" @keyup.native.enter="confim_up"></el-input>
					</el-form-item>
					<el-form-item label="封面">
						<el-upload action="none" list-type="picture-card" :on-preview="handlePictureCardPreview"
							:on-remove="handleRemove" :on-change="check_file" :auto-upload="false" :drag="false"
							:multiple="false" :show-file-list="false">
							<img v-if="uploadURL" :src="uploadURL" style="width: 100%" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<el-dialog :visible.sync="dialogVisible_item2">
								<img width="100%" height="100%" :src="image_item2" alt="加载失败" />
							</el-dialog>
						</el-upload>
					</el-form-item>
				</el-form>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel_up">取 消</el-button>
				<el-button type="primary" @click="confim_up">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	/*导入更新分类 */
	import {
		updata_class_listV2
	} from "@/request/api";
	/*导入上传图片 */
	import {
		upload_img
	} from "@/request/api";
	/*导入添加*/
	import {
		insert_class
	} from "@/request/api";
	export default {
		name: "shsCeshi",
		props: {
			//标题
			shs_title: {
				type: String,
				default: "null",
			},
			//第一个属性名称
			item_name1: {
				type: String,
				default: "null",
			},
			//第一个属性内容
			item_name1_con: {
				type: String,
				default: null,
			},
			// 弹框的宽度 最好是固宽
			shs_min_width: {
				type: String,
				default: "550px",
			},
			// //图片标识
			shs_coverUrl: {
				type: String,
				default () {
					return "";
				},
			},
			classID: {
				type: Number,
				default () {
					return 0;
				},
			},
			// 启用标识
			shs_active: {
				type: Number,
				default: 1,
			},
			//弹框 显示隐藏 标识
			dialogVisible_item: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				dialogVisible: false, //弹框 显示隐藏 标识
				dialogVisible_item2: false, //预览图 显示隐藏 标识
				image_item2: null, //预览图url
				uploadURL: "", //上传图片的URL
				shs_title1: null, // 弹框标题
				adminID: 0, //管理员标识
				shs_active_item: this.shs_active, //启用标识
				shs_classID: this.classID, //classID
				form_up_class: {
					className: "",
					coverUrl: "",
				}, //表单数据
				currentFile: null, //最新图片实例
				// fileList: null, //文件列表
				confirm_flog: false, //提交确认的标识
				rules: { //验证
					className: [{
							required: true,
							message: "请输入名称",
							trigger: ['blur']
						},
						{
							min: 2,
							max: 20,
							message: "长度在 2 到 20 个字符",
							trigger: ['blur']
						},
					],
				},
			};
		},
		methods: {
			// 弹框关闭之前 按需清空数据
			handleClose() {
				// 检测是否已提交文件 this.form_up_class是否为空 是否有点击提交确认的标识 this.confirm_flog ==true
				let msg = "你还有数据未提交，确定要关闭吗？";
				if (
					this.confirm_flog == true &&
					(Boolean(this.form_up_class.className) ||
						Boolean(this.form_up_class.coverUrl))
				) {
					msg = "你的数据提交失败，确定要关闭吗？";
					this.$confirm(msg)
						.then(() => {
							this.form_up_class = {
								className: "",
								coverUrl: "",
							}; //表单数据
							this.dialogVisible = false;
							this.image_item2 = null;
							this.shs_classID = 0;
							this.uploadURL = "";
							this.shs_active_item = 1;
							this.confirm_flog = false;
						})
						.catch(() => {});
				} else if (
					this.confirm_flog == false &&
					(Boolean(this.form_up_class.className) ||
						Boolean(this.form_up_class.coverUrl))
				) {
					this.$confirm(msg)
						.then(() => {
							this.form_up_class = {
								className: "",
								coverUrl: "",
							}; //表单数据
							this.dialogVisible = false;
							this.image_item2 = null;
							this.shs_classID = 0;
							this.uploadURL = "";
							this.shs_active_item = 1;
							this.confirm_flog = false;
						})
						.catch(() => {});
				} else {
					this.form_up_class = {
						className: "",
						coverUrl: "",
					}; //表单数据
					this.dialogVisible = false;
					this.image_item2 = null;
					this.shs_classID = 0;
					this.shs_active_item = 1;
					this.uploadURL = "";
					this.confirm_flog = false;
				}
			},
			// 确定  -- 提交
			confim_up() {
				if (!this.form_up_class.className) {
					this.$message({
						message: "请设置类别名称",
						type: "error",
					});
					return;
				}
				if (this.form_up_class.className.length < 2 || this.form_up_class.className.length > 20) {
					this.$message({
						message: "类别名称长度在 2 到 20 个字符",
						type: "error",
					});
					return;
				}
				if (!this.currentFile && !this.form_up_class.coverUrl) {
					this.$message({
						message: "请选择图片",
						type: "error",
					});
					return;
				}
				this.confirm_flog = true; //提交确认的标识
				let formdata = new FormData();
				if (this.currentFile) {
					//保存formdata
					formdata.append("single_image_file", this.currentFile.raw);
					upload_img(formdata).then(data => {
						if (data.data.code == 1) {
							this.form_up_class.coverUrl = data.data.path; //图片网址
							let obj = {
								userID: JSON.parse(localStorage.getItem('userinfo')).userID || 0,
								className: this.form_up_class.className,
								Cover: this.form_up_class.coverUrl,
								active: this.shs_active_item,
							};
							//如果classID不为0就执行更新
							if (this.shs_classID != 0) {
								if (isNaN(this.shs_classID)) {
									this.$message({
										message: "分类id的类型错误/整型",
										type: "info",
									});
									return;
								}
								obj.classID = this.shs_classID;
								updata_class_listV2(obj).then(data => {
									if (data.data.code == 200) {
										//提示 --成功
										this.$notify({
											message: data.data.msg,
											type: "success",
										});
										//给新数组赋值
										this.$emit("list_change", data.data);
										this.uploadURL = "";
										this.currentFile = null; //清空保存的文件
										this.confirm_flog = false; //提交确认的标识 成功后false
										this.form_up_class = {
											className: "",
											coverUrl: "",
										}; //提交成功清空提交的数据
										this.dialogVisible = false;
									} else {
										//提示 --失败
										this.$notify.error({
											message: data.data.msg,
										});
									}
								}).catch(err => {
									this.$notify.error({
										message: err
									});
								})
							}else{
								//执行添加
							insert_class(obj).then(data => {
								if (data.data.code == 200) {
									//提示 --成功
									this.$notify({
										message: data.data.msg,
										type: "success",
									});
									//给新数组赋值
									this.$emit("list_change", data.data);
									this.uploadURL = "";
									this.currentFile = null; //清空保存的文件
									this.confirm_flog = false; //提交确认的标识 成功后false
									this.form_up_class = {
										className: "",
										coverUrl: "",
									}; //提交成功清空提交的数据
									this.dialogVisible = false;
								} else {
									//提示 --失败
									this.$notify.error({
										message: data.data.msg,
									});
								}
							}).catch(err => {
								this.$notify.error({
									message: err
								});
							})

							}
							
						} else {
							/*图片上传失败*/
							this.$notify.error({
								message: data.data.msg
							});
						}
					})
				} else {
					//更新
					let obj = {
						userID: JSON.parse(localStorage.getItem('userinfo')).userID || 0,
						className: this.form_up_class.className,
						Cover: this.form_up_class.coverUrl,
						active: this.shs_active_item,
					};
					if (isNaN(this.shs_classID)) {
						this.$message({
							message: "分类id的类型错误/整型",
							type: "info"
						});
						return;
					}
					obj.classID = this.shs_classID;
					updata_class_listV2(obj).then(data => {
						if (data.data.code == 200) {
							//提示 --成功
							this.$notify({
								message: data.data.msg,
								type: "success",
							});
							//给新数组赋值
							this.$emit("list_change", data.data);
							this.uploadURL = "";
							this.currentFile = null; //清空保存的文件
							this.confirm_flog = false; //提交确认的标识 成功后false
							this.form_up_class = {
								className: "",
								coverUrl: "",
							}; //提交成功清空提交的数据
							this.dialogVisible = false;
						} else {
							//提示 --失败
							this.$notify.error({
								message: data.data.msg
							});
						}
					}).catch(err => {
						this.$notify.error({
							message: err
						});
					})
				}
			},
			// 取消提交
			cancel_up() {
				this.dialogVisible = false;
				this.image_item2 = null; //清空弹框的 预览图url
				this.currentFile = null; //清空保存的文件
			},
			// 预览图
			handlePictureCardPreview(file) {
				this.dialogVisible_item2 = true;
				this.image_item2 = URL.createObjectURL(file.raw);
			},
			// 图片移除 清空当前图片实例
			handleRemove() {
				this.currentFile = null;
			},
			//图片选择后
			check_file(file) {
				// 赋值到最新图片实例
				this.currentFile = file;
				this.uploadURL = URL.createObjectURL(file.raw); //创建对象的URL
				this.form_up_class.coverUrl = URL.createObjectURL(file.raw);
			},
		},
		computed: {
			//item1 名称
			shs_item1() {
				return this.item_name1 + "名称";
			},
		},
		mounted() {
			this.adminID = JSON.parse(window.localStorage.getItem("adminID"));
			this.dialogVisible = this.dialogVisible_item;
			this.uploadURL = this.shs_coverUrl; //编辑小图
			this.form_up_class.coverUrl = this.uploadURL;
		},
		watch: {
			//子组件的更新
			dialogVisible(val) {
				this.$emit("dialogVisible_item_change", val);
			},
			//父组件的更新
			dialogVisible_item(val) {
				this.form_up_class.className = null;
				this.shs_active_item = this.shs_active;
				if (this.shs_title == "分类编辑") {
					this.uploadURL = this.shs_coverUrl; //图片更新
					this.form_up_class.coverUrl = this.shs_coverUrl;
					this.form_up_class.className = this.item_name1_con || "";
				}
				this.dialogVisible = val;
			},
			shs_coverUrl(val) {
				this.uploadURL = val; //图片更新
				this.form_up_class.coverUrl = this.uploadURL;
			},
			classID(val) {
				this.shs_classID = val;
			},
			//标题更新
			shs_title(val) {
				this.shs_title1 = val;
			},
		},
	};
</script>

<style>
</style>
